<template>
  <div class="max">
    <div class="hang1">
      <div class="hang1-lie1">
        <div class="hang1-lie1-hang1">
          <!-- 上右 -->
          <div style="width: 100%;height:100%;">
            <div id="main1" style="width: 100%;height:100%;"></div>
          </div>
        </div>
        <div class="hang1-lie2-hang2">
          <!-- 中右 -->
          <div style="width: 100%;height:100%;">
            <div id="main3" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
      <div class="hang1-lie2">
        <div class="hang1-lie2-hang3">
          <!-- 上左 -->
            <div style="width: 100%;height:100%;">
              <div id="main2" style="width: 100%;height:100%;"></div>
            </div>
        </div>
        <div class="hang1-lie1-hang4">
          <!-- 中左 -->
          <div style="width: 100%;height:100%;">
            <div id="main4" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="hang2">
      <div class="hang2-lie1">
        <!-- 下左 -->
        <div class="hang2-lie1-1" ref="myLeftTop">
          <!-- 下左一 -->
          <div style="text-align: center;">
            <h3 class="myH3">车辆年度成本TOP3</h3>
            <el-table :data="cheliang" border size="mini" :height="biaoHeight" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'44px'}" :cell-style="{padding:'0px'}"
              style="width: 100% ; font-size: 17px ;">
              <el-table-column prop="date" width="100%" label="排名" align="center">
              </el-table-column>
              <el-table-column prop="name" label="车型" align="center">
              </el-table-column>
              <el-table-column prop="shouru" label="成本" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="hang2-lie1-2">
          <!-- 下左二 -->
          <div style="text-align: center;">
            <h3 class="myH3">衍生年度成本TOP3</h3>
            <el-table :data="yansheng" border size="mini" :height="biaoHeight" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'44px'}" :cell-style="{padding:'0px'}"
              style="width: 100%  ;font-size: 17px ;">
              <el-table-column prop="date" width="100%" label="排名" align="center">
              </el-table-column>
              <el-table-column prop="name"  label="项目" align="center">
              </el-table-column>
              <el-table-column prop="shouru" label="成本" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="hang2-lie2">
        <!-- 下中 -->
        <div class="hang2-lie2-1">
          <!-- 下中一 -->
          <div style="width: 100%;height:50%;text-align: center;">
            <h3 class="myH3">年度成本明细</h3>
            <el-table :data="mingxi" border size="mini" :height="biaoHeightxi" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'30px'}" :cell-style="{padding:'0px'}"
              style="width: 100%  ;font-size: 17px ;">
              <el-table-column prop="name" label="类型" align="center">
              </el-table-column>
              <el-table-column prop="value" label="成本" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="hang2-lie2-2">
          <!-- 下中二 -->
            <div style="width: 100%;height:100%;">
              <div id="main" style="width: 100%;height:100%;"></div>
            </div>
        </div>
      </div>
      <div class="hang2-lie3">
        <!-- 下右 -->
        <div style="width: 100%;height:100%;">
          <div id="main5" style="width: 100%;height:100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  window.onresize = function(){
     location.reload()
  }
  export default {
    data() {
      return {
        biaoHeight:'',              //表高度
        biaoHeightxi:'',            //表高度

        niandushouru:[51,20,14,45],
        tuyi:[] /* [88, 92, 63, 77, 94, 80, 72, 86, 22, 15, 66, 32] */,
        yanshengy:[],
        chexing:[],

        chexingx:[],
        chexingy:[],

        zhanting:[],              //展厅(12月)
        IDCC:[],                  //IDCC(12月)
        erwang:[],                //二网(12月)
        dakehu:[],                //大客户(12月)

/*        zhanting:[88, 92, 63, 77, 94, 80, 72, 86, 22, 15, 66, 32],              //展厅(12月)
        IDCC:[70,50,82,30,54,55,18,41,87,17,114,111],                  //IDCC(12月)
        erwang:[33,89,15,141,87,35,15,63,175,123,14,132],                //二网(12月)
        dakehu:[56,123,58,333,16,89,14,35,361,321,41,52],                //大客户(12月) */

        yanshengyuex:[],          //二手车部衍生业务本月收入对比 x轴数据
        yanshengyuey:[],          //二手车部衍生业务本月收入对比 y轴数据

        cheliang: [{        //车辆年度成本TOP3（万元）
          date: '',
          name: '',
          shouru: ''
        },{
          date: '',
          name: '',
          shouru: ''
        },{
          date: '',
          name: '',
          shouru: ''
        },] ,
        yansheng: [
          {
            date: '',
            name: '',
            shouru: ''
          },{
            date: '',
            name: '',
            shouru: ''
          },{
            date: '',
            name: '',
            shouru: ''
          }],

          mingxishan:[                      //扇形图
            {
              name: '',
              value: '',
            },{
              name: '',
              value: '',
            },{
              name: '',
              value: '',
            },{
              name: '',
              value: '',
            },
          ],

          mingxi: [{                  //明细表数据
            name: '',
            value:''
          }, {
            name: '',
            value:''
          }, {
            name: '',
            value: '',
            value:''
          }, {
            name: '',
            value:''
          }],

        data8:[]
      }
    },
    methods: {
      myEcharts1() { //二手车部车辆业务本年度月成本对比（万元）
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main1'));
        var xDataArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] //x轴数据
        var yDataArr = this.tuyi //y轴数据
        // 指定图表的配置项和数据
        var option = {

          title: {
            top:'10',
            text: '二手车部车辆业务本年度月成本对比（万元）',
            left: 'center'
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:'{a}<br/>{b} : {c} (万元)'
          },
          toolbox: {          //工具栏
            show: true,
            feature: {
              dataView: {
                readOnly: true
              }, //readOnly只读模式
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: [{
            type: "category",
            data: xDataArr,
            axisLabel: {
               interval:0,
               rotate:5
            },
            axisTick: {
              lineStyle: {
                width: 0
              }
            }
          }],
          yAxis: [{
            type: "value",
            axisLabel:{formatter:'{value}'}
          }],
          series: [{
            name: "销售车辆成本",
            type: "bar",
            barWidth: "50%",
            data: yDataArr
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      myEcharts2() { //二手车部衍生业务本年度月成本对比（万元）2
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main2'));
        var xDataArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] //x轴数据
        var yDataArr = this.yanshengy //y轴数据
        // 指定图表的配置项和数据
        var option = {
          title: {
            top:'10',
            text: '二手车部衍生业务本年度月成本对比（万元）',
            left: 'center'
          },
          toolbox: {          //工具栏
            show: true,
            feature: {
              dataView: {
                readOnly: true
              }, //readOnly只读模式
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:'{a}<br/>{b} : {c} (万元)'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: [{
            type: "category",
            data: xDataArr,
            axisLabel: {
               interval:0,
               rotate:5
            },
            axisTick: {
              lineStyle: {
                width: 0
              }
            }
          }],
          yAxis: [{
            type: "value",
            axisLabel:{formatter:'{value}'}
          }],
          series: [{
            name: "衍生业务成本",
            type: "bar",
            barWidth: "50%",
            data: yDataArr
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

     myEcharts3() { //二手车部车辆业务本月成本对比（万元）3
         // 基于准备好的dom，初始化echarts实例
         var myChart = this.$echarts.init(document.getElementById('main3'));
         var xDataArr = this.chexingx //x轴数据
         var yDataArr = this.chexingy //y轴数据
         // 指定图表的配置项和数据
         var option = {
           title: {
             top:'10',
             text: '二手车部车辆业务本月成本对比（万元）',
             left: 'center'
           },
           toolbox: {          //工具栏
             show: true,
             feature: {
               dataView: {
                 readOnly: true
               }, //readOnly只读模式
               saveAsImage: {}
             }
           },
           tooltip: {
             trigger: "axis",
             axisPointer: {
               type: "shadow"
             },
             formatter:'{a}<br/>{b} : {c} (万元)'                      //提示框单位
           },
           grid: {
             left: '3%',
             right: '4%',
             bottom: '1%',
             containLabel: true
           },
           xAxis: [{
             type: "category",
             data: xDataArr,
             axisLabel: {
                interval:0,
                rotate:5
             },
             axisTick: {
               lineStyle: {
                 width: 0
               }
             }
           }],
           yAxis: [{
             type: "value",
             axisLabel:{formatter:'{value}'}
           }],
           series: [{
             name: "销售车辆成本",
             type: "bar",
             barWidth: "50%",
             data: yDataArr
           }]
         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
       },

      myEcharts4() { //二手车部衍生业务本月成本对比（万元）3
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main4'));
          var xDataArr = this.yanshengyuex //x轴数据
          var yDataArr = this.yanshengyuey //y轴数据
          // 指定图表的配置项和数据
          var option = {
            title: {
              top:'10',
              text: '二手车部衍生业务本月成本对比（万元）',
              left: 'center'
            },
            toolbox: {          //工具栏
              show: true,
              feature: {
                dataView: {
                  readOnly: true
                }, //readOnly只读模式
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              },
              formatter:'{a}<br/>{b} : {c} (万元)'                      //提示框单位
            },
            grid: {        //图表外边距
              left: '3%',
              right: '4%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: [{
              type: "category",
              data: xDataArr,
              axisLabel: {
                 interval:0,
                 rotate:5
              },
              axisTick: {
                lineStyle: {
                  width: 0
                }
              }
            }],
            yAxis: [{
              type: "value",
              axisLabel:{formatter:'{value}'}
            }],
            series: [{
              name: "衍生业务成本",
              type: "bar",
              barWidth: "50%",
              data: yDataArr
            }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },

      myEcharts5() { //二手车部各岗位本年度成本对比（万元）5
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main5'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            top:'10',
            text: '二手车部各岗位本年度成本对比(万元)',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow"
            },
          },

          legend: {
            data: ['展厅', 'IDCC', '二网', '大客户成本'],
            top: '10%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {
                readOnly: true
              }, //readOnly只读模式
/*              magicType: {
                type: ['line', 'bar']
              }, */
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap:['50%','20%'],
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '展厅',
              type: 'line',

              data: this.zhanting
            },
            {
              name: 'IDCC',
              type: 'line',

              data: this.IDCC
            },
            {
              name: '二网',
              type: 'line',

              data: this.erwang
            },
            {
              name: '大客户成本',
              type: 'line',

              data: this.dakehu
            },
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      myEcharts(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
      	   title: {
      	          text: '年度成本明细',
      	          left: 'left'
      	      },
      	      tooltip: {
      	          trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'      //显示比例
      	      },
              toolbox: {          //工具栏
                show: true,
                feature: {
                  dataView: {
                    readOnly: true
                  }, //readOnly只读模式
                  saveAsImage: {}
                }
              },

     	      legend: {                      //图例组件
      	          orient: 'vertical',
      	          left: 'left',
                  bottom:'20'
      	      },

      	      series: [
      	          {
                      center:["60%","50%"],           //图表位置
      	              name: '明细',
      	              type: 'pie',
      	              radius: '60%',      //饼状图大小
      	              data: this.mingxishan,
      	              emphasis: {
      	                  itemStyle: {
      	                      shadowBlur: 10,
      	                      shadowOffsetX: 0,
      	                      shadowColor: 'rgba(0, 0, 0, 0.5)'
      	                  }
      	              }
      	          }
      	      ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        },
      //二手车部衍生业务本月成本对比（万元）
     BenYueYanShengXiangMuChengBenDuiBi() {
        this.$ajax.post('ershouCheTuBiao/BenYueYanShengXiangMuChengBenDuiBi', {}).then(res => {
          var result = res.data
         for (let i = 0; i < result.data.length; i++) {
            this.yanshengyuex[i] = result.data[i].name;
            this.yanshengyuey[i] = result.data[i].number;
            var str = this.yanshengyuey[i] * 0.0001
            const realVal = parseFloat(str).toFixed(2);
            this.yanshengyuey[i] = realVal
         }
          this.myEcharts4();
        })
      },
      //二手车部车辆业务本月成本对比（万元）
     MeiGeCheXingCHengBenTu(){
            this.$ajax.post('ershouCheTuBiao/MeiGeCheXingCHengBenTu', {}).then(res => {
              var result = res.data
              for (var i = 0; i < result.data.length; i++) {
                this.chexingx[i] = result.data[i].name;
                this.chexingy[i] = result.data[i].bigNumber;
                var str = this.chexingy[i] * 0.0001
                const realVal = parseFloat(str).toFixed(2);
                this.chexingy[i] = realVal
              }
              this.myEcharts3();
            })
      },
      //车辆年度成本TOP3（万元）
    CHeLiangNianDuChengBenPaiMing(){
        this.$ajax.post('ershouCheTuBiao/CHeLiangNianDuChengBenPaiMing', {}).then(res => {
          var result = res.data
          var data = 0;
          for (var i = 0; i < result.data.length; i++) {
            data++;
            var str1 =result.data[i].bigNumber * 0.0001;                     //换为万元
            const realVal = parseFloat(str1).toFixed(2);                  //保留两位小数
            var str = realVal.toString();
            var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
            this.cheliang[i].date = data
            this.cheliang[i].name = result.data[i].name
            this.cheliang[i].shouru = '￥'+str.replace(reg,"$1,")+'(万元)'

          }
        })
      },
      // 衍生年度成本TOP3（万元）
     YanShengNianDUChengBenPaiMing(){
        this.$ajax.post('ershouCheTuBiao/YanShengNianDUChengBenPaiMing', {}).then(res => {
          var result = res.data
          var data = 0;
          for (var i = 0; i < result.data.length; i++) {
            data++;
            var str1 =result.data[i].number * 0.0001;                     //换为万元
            const realVal = parseFloat(str1).toFixed(2);                  //保留两位小数
            var str = realVal.toString();
            var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
            this.yansheng[i].date = data
            this.yansheng[i].name = result.data[i].name
            this.yansheng[i].shouru ='￥'+str.replace(reg,"$1,")+'(万元)'
          }
        })
      },
      //二手车部车辆业务本年度月成本对比（万元）
     xiaoshoubuCheLiangYeWuBennianDuYueChengBenDuiBi(){
        this.$ajax.post('ershouCheTuBiao/xiaoshoubuCheLiangYeWuBennianDuYueChengBenDuiBi', {}).then(res => {
          var result = res.data
          for (var i = 0; i < result.data.length; i++) {
            var str = result.data[i]* 0.0001
            const realVal = parseFloat(str).toFixed(2);
            this.tuyi[i] = realVal
          }
          this.myEcharts1();
        })
      },
      //二手车部衍生业务本年度月成本对比（万元）(12月)
     XiaoShouBuYanShengYeWuBenNianDuYueChengBenDuiBi(){
        this.$ajax.post('ershouCheTuBiao/XiaoShouBuYanShengYeWuBenNianDuYueChengBenDuiBi', {}).then(res => {
          var result = res.data
          for (var i = 0; i < result.data.length; i++) {
            var str = result.data[i]* 0.0001
            const realVal = parseFloat(str).toFixed(2);
            this.yanshengy[i] = realVal
          }
          this.myEcharts2();
        })
      },

      //二手车部各岗位本年度成本对比（万元））(12月)
      XiaoShouBuGeGangWeiBenNianDuCHengBen(){
        this.$ajax.post('ershouCheTuBiao/XiaoShouBuGeGangWeiBenNianDuCHengBen', {}).then(res => {
          var result = res.data
          for (var i = 0; i < 12; i++) {
            var str = result.data[0][i] * 0.0001
            const realVal = parseFloat(str).toFixed(2)
            this.zhanting[i] = realVal
          }
          for (var i = 0; i < 12; i++) {
            var str = result.data[1][i] * 0.0001
            const realVal = parseFloat(str).toFixed(2)
            this.IDCC[i] = realVal

          }
          for (var i = 0; i < 12; i++) {
            var str = result.data[2][i] * 0.0001
            const realVal = parseFloat(str).toFixed(2)
            this.erwang[i] = realVal
          }
          for (var i = 0; i < 12; i++) {
            var str = result.data[3][i] * 0.0001
            const realVal = parseFloat(str).toFixed(2)
            this.dakehu[i] = realVal
          }
          this.myEcharts5();
        })
      },

      //年度成本明细（万元）
      NianDuChengBenMingXi(){
        this.$ajax.post('ershouCheTuBiao/NianDuChengBenMingXi', {}).then(res => {
          var result = res.data
          for (var i = 0; i < result.data.length; i++) {
            var str1 = result.data[i].bigNumber * 0.0001;                     //换为万元
            const realVal = parseFloat(str1).toFixed(2);                  //保留两位小数
            var str = realVal.toString();
            var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
            this.mingxi[i].value= '￥'+str.replace(reg,"$1,")+'(万元)'
            this.mingxi[i].name = result.data[i].name

            this.mingxishan[i].value= realVal
            this.mingxishan[i].name = result.data[i].name
          }
          this.myEcharts();
        })
      },


    },
    mounted() {
      this.myEcharts1();
      this.myEcharts2();
      this.myEcharts3();
      this.myEcharts4();
      this.myEcharts5();
      this.myEcharts();
      this.biaoHeight= 'calc'+'('+this.$refs.myLeftTop.offsetHeight+'px '+'+'+' 3px '+'-'+' 1.7em'+')'    //计算表top3高度       myLeftTop表一div高度，高度相同，两个top表通用
      this.biaoHeightxi= 'calc'+'('+this.$refs.myLeftTop.offsetHeight+'px '+'+'+' -7px '+'-'+' 1.7em'+')'  //计算表明细高度
    },
   created() {
      this.MeiGeCheXingCHengBenTu();                                    //二手车部车辆业务本月成本对比（万元）
      this.BenYueYanShengXiangMuChengBenDuiBi();                        //二手车部衍生业务本月成本对比（万元）
      this.CHeLiangNianDuChengBenPaiMing();                             //车辆年度成本TOP3（万元）
      this.xiaoshoubuCheLiangYeWuBennianDuYueChengBenDuiBi();           //二手车部车辆业务本年度月成本对比（万元）
      this.XiaoShouBuYanShengYeWuBenNianDuYueChengBenDuiBi();           //二手车部衍生业务本年度月成本对比（万元）(12月)
      this.YanShengNianDUChengBenPaiMing();                             //衍生年度成本TOP3（万元）
      this.XiaoShouBuGeGangWeiBenNianDuCHengBen();                      //二手车部各岗位本年度成本对比（万元））(12月)
      this.NianDuChengBenMingXi();                                      //年度成本明细（万元）
    }
  }
</script>

<style scoped>
 .max {
     /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .hang1 {
 /* 弹性左右布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
   /* 总布局第一行 */
    width: calc(100% - 3px );
    height: 50%;

  }

  .hang2 {
    margin-top: 18px;
    /* 弹性左右布局 */
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: row;
       flex-direction: row;
    /* 总布局第二行 */
    width: calc(100% - 24px );
    height: 50%;

  }

  .hang1-lie1 {
    /* 总布局第一行右列 */
    width: 50%;
    height: 100%;

  }

  .hang1-lie2 {
    /* 总布局第一行左列 */
    width: 50%;
    height: 100%;
  }

  .hang2-lie1 {
    /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 总布局第二行右列 */
    /* 下左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: 30%;
    height: calc(102.3% - 12px);
  }
  .hang2-lie1-1{
    /* 下左一 */
   width: 100%;
   height: 50%;
  }
  .hang2-lie1-2{
    /* 下左二 */
   width: 100%;
   height: 50%;
  }

  .hang2-lie2 {
    /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 总布局第二行中列 */
    /* 下中 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: 28%;
    height: calc(102.3% - 12px);
  }
  .hang2-lie2-1{
      /* 下中一 */
      width: 100%;
      height: 50%;
    }
    .hang2-lie2-2{
        /* 下中二 */
        width: 100%;
        height: 50%;
    }

  .hang2-lie3 {
    /* 总布局第二行左列 */
    /* 下右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: 43%;
    height: calc(102.3% - 12px);
  }

  .hang1-lie1-hang1 {
    /* 上左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }
  .hang1-lie2-hang3 {
    /* 上右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }

  .hang1-lie2-hang2 {
    /* 中左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }

  .hang1-lie1-hang4 {
    /* 中右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }
  .myH3 {
    padding: 0;
    margin: 0;
  }
</style>